<template>
  <basic-container>
    <avue-crud
      :data="data"
      :page.sync="page"
      :option="option"
      v-model="obj"
      ref="crud"
      @row-save="rowSave"
      @on-load="onlists"
      :before-open="beforeOpen"
      @row-update="rowUpdate"
      @row-del="rowDel"
      :table-loading="orderLoading"
      @toggleSelection="toggleSelection"
      @selection-change="selectionChange"
      @search-change="searchChange"
    >
      <template slot-scope="scope" slot="menu">
        <el-button type="text" @click.stop="onrowEdits(scope.row,scope.index)">编辑</el-button>
      </template>
      <template slot-scope="{type,disabled}" slot="detailForm" style="width: 100%">
        <Wangeditor v-model="obj.detail" ref="wangeditor1"></Wangeditor>
      </template>
      <template slot-scope="{type,disabled}" slot="pitcure_idsForm">
        <Upload ref="upload" :multiple="true" @Upload="Upload" :fileList="fileList"></Upload>
      </template>
      <template slot-scope="{type,disabled}" slot="dm_idsForm">
        <avue-select multiple v-model="dm_ids" placeholder="请选择内容" :dic="dm_idsDic"></avue-select>
      </template>
      <template slot="menuLeft" slot-scope="{size}">
        <el-button type="danger" :size="size" @click="toggleSelection()">多选删除（ 已选{{selectLen}} ）</el-button>
      </template>
        <template slot-scope="{type,disabled}" slot="is_hotForm">
            <el-switch
                v-model="is_hot"
                :inactive-value="0"
                :active-value="1"
            ></el-switch>
        </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import Wangeditor from '../../components/Wangeditor'
import {jubendmList,dmadduserList,dmgetList,dmupdateuserList,dmdeleteuserList} from "@/api/scriptDetail";
import { dmList } from '@/api/dm'
import Upload from '../../components/upload'
const DIC = {
  visit_form: [{
    label: '公开',
    value: 1
  }, {
    label: '盒装',
    value: 2
  },{
    label: '精盒',
    value: 3
  }, {
    label: '城限',
    value: 4
  },{
    label: '独家',
    value: 5
  }, {
    label: '实景',
    value: 6
  }],
  difficulty: [
    {
      label: '入门',
      value: 1
    },
    {
      label: '进阶',
      value: 2
    },
    {
      label: '适中',
      value: 3
    },
    {
      label: '烧脑',
      value: 4
    },
    {
      label: '撕逼',
      value: 5
    }
  ],
  hotel_type: [
    {
      label: '热门',
      value: 1
    },
    {
      label: '新到',
      value: 2
    },
    {
      label: '推荐',
      value: 3
    },
    {
      label: '预告',
      value: 4
    }
  ]
}
export default {
  components:{Wangeditor,Upload},
  data() {
    return {
      data: [],
      fileList: [],
      dm_ids: [],
      dm_idsDic: [],
      selectLen: 0,
      is_hot: '',
      obj:{},
      query:{},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        "pageSizes": [
          10,
          20,
          30,
          40,
          50,
          100
        ],
        "background": true
      },
      orderLoading: false,
      pitcure_ids: '',
      option:{
        align:'center',
        menuAlign:'center',
        menuWidth:400,
        viewBtn:false,
        editBtn: false,
        selection: true,
        tip: false,
        menuTitle:'操作',
        addTitle: '保存',
        editTitle: '编辑剧本',
        searchBtnText:'搜索',
        emptyBtnText:'清空',
        addBtnText:'新增剧本',
        delBtnText: '删除',
        delBtnIcon:'null',
        editBtnIcon:'null',
        updateBtnText:'保存',
        saveBtnText:'保存',
        cancelBtnText:'取消',
        column:[
          {
            label: '剧本名称',
            prop: 'name',
            rules: [{
              required: true,
              message: "请输入剧本名称",
              trigger: "blur"
            }],
          },
          {
            label:'作者',
            prop:'author',
            search:true,
            rules: [{
              required: true,
              message: "请输入作者",
              trigger: "blur"
            }],
          },
          {
            label:'发行',
            prop:'issue',
            rules: [{
              required: true,
              message: "请输入发行",
              trigger: "blur"
            }],
          },
          {
            label:'游玩形式',
            prop:'visit_form',
            type: "select",
            hide: true,
            dicData: DIC.visit_form,
            rules: [{
              required: true,
              message: "请选择游玩形式",
              trigger: "blur"
            }],
          },
          {
            label:'游玩难度',
            prop:'difficulty',
            search:true,
            hide: true,
            type: "select",
            dicData: DIC.difficulty,
            rules: [{
              required: true,
              message: "请选择游玩难度",
              trigger: "blur"
            }],
          },
          {
            label:'店家类型',
            prop:'hotel_type',
            hide: true,
            search:true,
            type: "select",
            dicData: DIC.hotel_type,
            rules: [{
              required: true,
              message: "请选择店家类型",
              trigger: "blur"
            }],
          },
          {
            label:'DM列表',
            prop:'dm_ids',
            hide: true,
            props: {
              label: 'name',
              value: 'id'
            },
          },
          {
            label:'价格',
            prop:'price_str',
            search:false,
            rules: [{
              required: true,
              message: "请输入价格",
              trigger: "blur"
            }],
          },
          {
            label:'价格(用于之后支付)',
            hide:true,
            type: 'number',
            prop:'price',
            rules: [{
              required: true,
              message: "请输入账号",
              trigger: "blur"
            }],
          },
          {
            label:'游玩时间',
            hide:true,
            prop:'play_time',
            rules: [{
              required: true,
              message: "请输入游玩时间",
              trigger: "blur"
            }],
          },
          {
            label:'人员配置',
            hide:true,
            prop:'staffing',
            rules: [{
              required: true,
              message: "请输入人员配置",
              trigger: "blur"
            }],
          },
          {
            label:'人员总数',
            prop:'user_count',
            hide:true,
            rules: [{
              required: true,
              message: "请输入人员总数",
              trigger: "blur"
            }],
          },
          {
            label:'评分',
            prop:'score',
            hide:true,
            type: "number",
            rules: [{
              required: true,
              message: "请输入评分",
              trigger: "blur"
            }],
          },
          {
            searchLabelWidth: 100,
            label: "是否热门",
            prop: "is_hot",
            search: true,
            hide:true,
            editDisabled: true,
            type: "select",
            value: 1,
            slot: true,
            dicData: [
                {
                    label: "是",
                    value: 1,
                },
                {
                    label: "否",
                    value: 0,
                },
            ],
            rules: [{
              required: true,
              message: "请选择是否热门",
              trigger: "blur"
            }],
            props: {
                label: "label",
                value: "value",
            },
          },
          {
            label:'描述',
            prop:'discribe',
            hide:true,
            rules: [{
              required: true,
              message: "请输入描述",
              trigger: "blur"
            }],
          },
          {
            label:'星级难度',
            prop:'star_difficulty',
            hide:true,
            type: 'rate',
            rules: [{
              required: true,
              message: "请选择星级难度",
              trigger: "blur"
            }],
          },
          {
            label:'剧本详情',
            span: 24,
            prop:'detail',
            hide:true,
            rules: [{
              required: true,
              message: "请输入剧本详情",
              trigger: "blur"
            }],
          },
          {
            label:'剧本图片',
            hide:true,
            prop:'pitcure_ids',
            rules: [],
          },
        ]
      },
    };
  },
  mounted() {
    this.dm_ids_List()
  },
  methods: {
    //更新
    onlists(page,params = {}) {
      this.orderLoading = true;
      jubendmList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        this.orderLoading = false;
        this.data = res.data.data.list
        this.page.total = res.data.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    //搜索
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage=1
      this.onlists(this.page, params);
      done();
    },
    //新增
    rowSave(row,done,loading) {
      loading()
      if(this.dm_ids === '') return  this.$message.error('请选择DM列表');
      if(this.fileList.length === 0) return this.$message.error('请上传剧本图片');
      row.pitcure_ids = this.fileList.map(v=>{return v.id}).join(',')
      row.dm_ids = this.dm_ids.join(',')
      row.detail = this.$refs.wangeditor1.value
      dmadduserList(row).then(() => {
        this.onlists(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done()
      });
    },
    //更新
    rowUpdate(row, index, loading, done) {
      loading()
      row.pitcure_ids = this.fileList.map(v=>{return v.id}).join(',')
      row.dm_ids = this.dm_ids.join(',')
      dmupdateuserList(row.id,row).then(() => {
        this.onlists(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        done();
        console.log(error);
      });
    },
    // 删除
    rowDel(row,index,ids) {
      const idList = row.id || ids
      if(idList){
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return dmdeleteuserList(idList);
          })
          .then(() => {
            this.onlists(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      }
    },
    //获取详情
    onrowEdits(row, index){
      this.dm_ids = []
      dmgetList(row.id).then((res) => {
        this.dm_ids = res.data.data.dm_list.map(v=>{return v.dm_id})
        this.fileList = res.data.data.pitcure_list
        this.$refs.crud.rowEdit(row, index)
        this.obj = res.data.data
      })
    },
    Upload(data){
      this.fileList = data
    },
    //获取剧本列表
    dm_ids_List(){
      dmList({no_page:true}).then(res=>{
        this.dm_idsDic = res.data.data.map(v=>{return {label:v.nickname,value:v.id}})
      })
    },
    //弹窗打开
    beforeOpen(done,type){
      if(type === 'add') {
        this.dm_ids = []
        this.fileList = []
      }
      done()
    },
    //是否热门
    onstatu(val, cods) {},
    //多选删除
    toggleSelection(){
      this.selectLen = this.$refs.crud.selectLen
      const ids = this.$refs.crud.tableSelect.map(v=>{return v.id}).join(',')
      this.rowDel('','',ids)
    },
    selectionChange(){
      this.selectLen = this.$refs.crud.selectLen
    }
  },
}
</script>

<style>
.avue-form__menu--center{
  text-align: right;
}
.avue-crud__right{
  display: none;
}
</style>
